<div class="torrents-content">
  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef>类型</th>
      <td mat-cell *matCellDef="let row">
        <div class="post-icon-type">
          <div class="post-pin">
            <mat-icon svgIcon="pin" *ngFor="let i of (row.pin | numberToArray)"></mat-icon>
          </div>
          <app-icon-type [typeName]="row.categoryName"></app-icon-type>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="title">
      <th mat-header-cell *matHeaderCellDef>标题</th>
      <td mat-cell *matCellDef="let row">
        <div class="post-title-div">
          <div class="post-title">{{row.title}}</div>
          <div class="post-subtitle">{{row.subtitle}}</div>
        </div>
      </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div class="post-element-detail"
             [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div class="post-element-div">

            <app-poster-plot class="post-element-poster-plot" [douban]="element.douban"
                             [imdb]="element.imdb"></app-poster-plot>

            <div class="post-element-info">
              <ng-container *ngIf="element.torrentList">
                <div *ngFor="let torrent of element.torrentList.slice(0,10)" class="post-element-info-item">
                  <button mat-button color="primary"
                          [matTooltip]="'种子大小: '+(torrent.fileSize | byte) + ' 点击下载种子'"
                          [matMenuTriggerFor]="torrentMenu">{{torrent.fileName | text:40}}</button>
                  <div class="post-element-author-div">
                    <button mat-button color="accent" matTooltip="发布者"
                            [routerLink]="'/user/details'"
                            [queryParams]="{id: element.uid}">{{element.username | text}}</button>
                    <button mat-button disabled>大小: {{torrent.size| byte}}</button>
                    <ng-container *ngIf="torrent.discount">
                      <button mat-button disabled>
                        <mat-icon svgIcon="up"></mat-icon>
                        x {{torrent.discount.upload * 100}}%
                        <mat-icon svgIcon="download"></mat-icon>
                        x {{torrent.discount.download * 100}}%
                      </button>
                    </ng-container>
                  </div>
                  <mat-divider></mat-divider>

                  <mat-menu #torrentMenu="matMenu">
                    <button mat-menu-item (click)="downloadTorrent(torrent.id)">直接下载</button>
                    <!--                  <button mat-menu-item (click)="downloadTorrentToClient(torrent.id)">下载到客户端</button>-->
                  </mat-menu>
                </div>
              </ng-container>
              <button mat-button color="accent" class="post-element-enter">查看详情</button>
            </div>
          </div>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"
        class="post-element-row" (click)="expandedElement = expandedElement === element ? null : element">
    </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="post-detail-row"></tr>
  </table>
  <mat-paginator [length]="resultsLength" [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>

<div class="fab-content">
  <button mat-fab color="primary" matTooltip="发布" matTooltipPosition="left" [routerLink]="'/release'">
    <mat-icon svgIcon="add"></mat-icon>
  </button>
</div>
